<#import "macros/common.ftl" as common>

<@common.page>

<a href="#" class="newEmailProvider" style="float:right;">{{Create New Provider}}</a>

<table class="grid tablesorter">
    <caption class="caption">{{Recipient providers}}</caption>
    <thead>
    <tr>
        <th width="5%">
            #
        </th>
        <th width="35%">
            {{Title}}
        </th>
        <th width="35%">
            {{URL}}
        </th>
        <th width="15%">
            {{Login}}
        </th>
        <th width="10%">
            {{Action}}
        </th>
    </tr>
    </thead>
    <tbody>
    <#list providers as provider>
        <tr>
            <td>
                ${provider.id}
            </td>
            <td>
                ${provider.title}
            </td>
            <td>
                ${provider.url}
            </td>
            <td>
                ${provider.login}
            </td>
            <td>
                <a class="editEmailProvider" emailProviderId="${provider.id}" href="#">{{Edit}}</a>
                <a class="testEmailProvider" emailProviderId="${provider.id}" href="#">{{Test}}</a>
                <a class="deleteEmailProvider" emailProviderId="${provider.id}" emailProviderTitle="${provider.title}" href="#">{{Delete}}</a>
            </td>
        </tr>
    </#list>
    <#if providers?size == 0>
        <tr>
            <td colspan="5">
                {{No providers}}
            </td>
        </tr>
    </#if>
    </tbody>
</table>

<#list providers as provider>
<div class="editProviderTable${provider.id}" style="display:none;width:30em;margin:0 auto;">
<table style="width:100%;">
    <caption style="font-size: 125%;text-align:center;padding:0.25em;">{{Edit}} - ${provider.title}</caption>
    <form action="" method="post">
        <input type="hidden" name="action" value="edit">
        <input type="hidden" name="emailProviderId" value="${provider.id}">

        <tr>
            <td class="form-field-name">
                {{Title}}:
            </td>
            <td>
                <input style="width:20em;" class="textbox" name="title" value="${provider.title}">
                <span class="error error__title"></span>
            </td>
        </tr>

        <tr>
            <td class="form-field-name">
                {{URL}}:
            </td>
            <td>
                <input style="width:20em;" class="textbox" name="url" value="${provider.url}">
                <span class="error error__url"></span>
            </td>
        </tr>

        <tr>
            <td class="form-field-name">
                {{Login}}:
            </td>
            <td>
                <input style="width:20em;" class="textbox" name="login" value="${provider.login}">
                <span class="error error__login"></span>
            </td>
        </tr>

        <tr>
            <td class="form-field-name">
                {{Password}}:
                <span class="error error__password"></span>
            </td>
            <td>
                <input style="width:20em;" class="textbox" name="password" value="${provider.password}">
            </td>
        </tr>

        <tr>
            <td colspan="2" style="text-align:center;">
                <input class="button" type="button" value="{{Save}}">
            </td>
        </tr>
    </form>
</table>
</div>
</#list>

<span class="error error__test"></span>
<div class="emailProviderResponse" style="display:none">
<table class="grid tablesorter">
    <caption class="caption">{{Test response}}</caption>
    <thead>
    <tr>
        <th width="5%">
            Id
        </th>
        <th width="30%">
            Recipient
        </th>
        <th width="65%">
            Parameters
        </th>
    </tr>
    </thead>
    <tbody class="responseBody">
    </tbody>
</table>
</div>

<div class="newProviderTable" style="display:none;width:30em;margin:0 auto;">
<table style="width:100%;">
    <caption style="font-size: 125%;text-align:center;padding:0.25em;">{{New Provider}}</caption>
    <form action="" method="post">
        <input type="hidden" name="action" value="edit">
        <input type="hidden" name="emailProviderId"">
        <tr>
            <td class="form-field-name">
                {{Title}}:
            </td>
            <td>
                <input style="width:20em;" class="textbox" name="title">
                <span class="error error__title"></span>
            </td>
        </tr>

        <tr>
            <td class="form-field-name">
                {{URL}}:
            </td>
            <td>
                <input style="width:20em;" class="textbox" name="url" value="http://">
                <span class="error error__url"></span>
            </td>
        </tr>

        <tr>
            <td class="form-field-name">
                {{Login}}:
            </td>
            <td>
                <input style="width:20em;" class="textbox" name="login">
                <span class="error error__login"></span>
            </td>
        </tr>

        <tr>
            <td class="form-field-name">
                {{Password}}:
                <span class="error error__password"></span>
            </td>
            <td>
                <input style="width:20em;" class="textbox" name="password">
            </td>
        </tr>

        <tr>
            <td colspan="2" style="text-align:center;">
                <input class="button" type="button" value="{{Save}}">
            </td>
        </tr>
    </form>
</table>
</div>

<div style="display:none">
<form id="deleteForm">
<input type="hidden" name="action" value="delete"/>
<input type="hidden" name="emailProviderId" value=""/>
</form>
</div>

<script type="text/javascript">
    $(function() {
    	$("a.testEmailProvider").click(function() {
	    	var id = $(this).attr("emailProviderId");
	    	$.post("providers", {action: "test", emailProviderId: id}, function(json) {
	    		 if (json["success"] == "false") 
	    		 {
	             	$(".emailProviderResponse").css("display", "none");
	               	$(".error__test").html(json["error"]);	    		 	
	             } else {
	             	$(".error__test").html("");
	                $(".emailProviderResponse").css("display", "block");
		    		var a = "";
                    var index = 0;
		    		for (var email in json)
		    		 	a += "<tr><td>"+(++index)+"</td><td>"+email+"</td><td>"+json[email]+"</td></tr>";
		            $(".responseBody").html(a);
	             }
	        }, "json");
           	return false;
    	});
    	$("a.deleteEmailProvider").click(function() {
    		 var id = $(this).attr("emailProviderId");
    		 var title = $(this).attr("emailProviderTitle");
    		 if (confirm("{{Are you sure you want to delete provider }} '"+title+"' ?"))
    		 {
    		 	$("#deleteForm").find("input[name='emailProviderId']").attr("value", id);
    		 	$("#deleteForm").submit();
    		 }
    	});
    
        $("a.editEmailProvider").click(function() {
            var id = $(this).attr("emailProviderId");
            var popup = window.popup("{{Edit Provider}}");

            popup.append($("div.editProviderTable" + id).clone().css("display", "block"));
            popup.find(".button").click(function() {
                var title = popup.find("input[name='title']").val();
                var url = popup.find("input[name='url']").val();
                var login = popup.find("input[name='login']").val();
                var password = popup.find("input[name='password']").val();

                $.post("providers", {action: "edit", emailProviderId: id, title: title, url: url, login: login, password: password}, function(json) {
                    if (json["success"] == "true") {
                        window.location = "providers";
                    } else {
                    	var errorInput = null;
                        popup.find(".error").each(function() {
                            var e = $(this);
                            var classes = e.attr('class').split(" ");
                            for (var i = 0; i < classes.length; i++) {
                                if (json[classes[i]]) {
                                    $(this).text(json[classes[i]]).css("display", "block");
                                    if (!errorInput)
                                    	errorInput = $(this).prev("input");
                                } else {
                                    $(this).text("").css("display", "none");
                                }
                            }
                        });
                        if (errorInput) {
                        	errorInput.focus();
                        }
                    }
                }, "json");

                return false;
            });
            popup.find("input[name='title']").focus();
        });

        $("a.newEmailProvider").click(function() {
            var popup = window.popup("{{New Provider}}");

            popup.append($("div.newProviderTable").clone().css("display", "block"));
            popup.find(".button").click(function() {
                var title = popup.find("input[name='title']").val();
                var url = popup.find("input[name='url']").val();
                var login = popup.find("input[name='login']").val();
                var password = popup.find("input[name='password']").val();

                $.post("providers", {action: "edit", title: title, url: url, login: login, password: password}, function(json) {
                    if (json["success"] == "true") {
                        window.location = "providers";
                    } else {
                        popup.find(".error").each(function() {
                            var e = $(this);
                            var classes = e.attr('class').split(" ");
                            for (var i = 0; i < classes.length; i++) {
                                if (json[classes[i]]) {
                                    $(this).text(json[classes[i]]).css("display", "block");
                                } else {
                                    $(this).text("").css("display", "none");
                                }
                            }
                        });
                    }
                }, "json");

                return false;
            });
        });
    });
</script>

</@common.page>
